import { Component, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Button, Timeline, TimelineItem } from 'ant-design-vue'
import type { JSX } from 'vue/jsx-runtime'
import { CaretUpOutlined } from '@ant-design/icons-vue'

export interface TimelineDto {
    title: string | JSX.Element
    button?: JSX.Element
    content: string | JSX.Element
    show?: boolean
}

@Component
export class TimelineComponent extends Render {
    @Prop() timelineData!: TimelineDto[] 

    timelineList = [] as TimelineDto[]


    // get timelineList() {
    //     return this.timelineData?.map(item => {
    //         return {
    //             ...item,
    //             show: true
    //         }
    //     })
    // }

    @Watch('timelineData', { immediate: true })
    handleWatchTimelineData() {
        if(this.timelineData?.length) {
            this.timelineList = this.timelineData.map(item => {
                return {
                    ...item,
                    show: true
                }
            })
        }
    }

    onToggleShow(item: TimelineDto) {
        item.show = !item.show
    }

    render() {
        return <>
            <Timeline>
                {
                    this.timelineList.map(i => {
                        console.log(333, i.content)
                        return <TimelineItem>
                            <div class="flex justify-between items-baseline mb-8px">
                                <div class="flex items-center cursor-pointer" onClick={() => this.onToggleShow(i)}>
                                    <div class="text-base font-bold">
                                        {i.title}
                                    </div>
                                    <div class={`w-12px h-12px flex items-center justify-center rounded-full bg-black-400 ml-6px transition-all transition-duration-1000 ${i.show ? 'transform rotate-180' : '' }`}>
                                        <CaretUpOutlined class="text-8px" style={{ color: 'text-black-300' }} />
                                    </div>
                                </div>
                                <div>{i.button}</div>
                            </div>
                            {i.show && i.content && <div class="bg-black-400 rounded-sm">{i.content}</div>}
                        </TimelineItem>
                    })
                }
            </Timeline>
        </>
    }
}

export default toNative<{timelineData: TimelineDto[]}, {}>(TimelineComponent)